<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>校园报修系统</title>
    <link rel="icon" href="ICO.png">
    <link rel="stylesheet" href="bootstrap-5.3.3-dist/bootstrap.min.css">
    <link rel="stylesheet" href="css.css">
    <script src="vue/vue_2.0.js"></script>
    <script src="axios/axios.min.js"></script>
    <style>
        .form-other-div button {
            width: 49.2%;
        }
    </style>
</head>

<body>
    <div class="main-div">
        <h2 class="index-h2">校 园 报 修 系 统 —— 登 录</h2>
        <div class="logo-div">
            <img src="shouye.png" />
        </div>
        <div class="form-div">
            <!-- 登录表单开始 -->
            <div id="login-div">
                <div class="form-floating mb-3">
                    <input type="text" class="form-control" id="u_uid" v-model="u_uid" placeholder="请输入账号">
                    <label for="u_uid">请输入账号</label>
                </div>
                <div class="form-floating mb-3">
                    <input type="password" class="form-control" id="u_pwd" v-model="u_pwd" placeholder="请输入密码">
                    <label for="u_pwd">请输入密码</label>
                </div>
                <div class="form-check-div" id="shenfen">
                    &nbsp;&nbsp;&nbsp;登 录 身 份：
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" v-model="shenfen" id="R1" value="1">
                        <label class="form-check-label" for="R1">系统用户</label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" v-model="shenfen" id="R2" value="2">
                        <label class="form-check-label" for="R2">维修员</label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" v-model="shenfen" id="R3" value="3">
                        <label class="form-check-label" for="R3">管理员</label>
                    </div>
                </div>
                <div class="form-sub-div mb-3">
                    <button type="button" @click="login" class="btn btn-outline-light form-control">登 录</button>
                </div>
            </div>
            <!-- 登录表单结束 -->
            <div class="form-other-div">
                <a href="register.html">
                    <button type="button" class="btn btn-outline-light">系统用户注册点这里😊</button>
                </a>
                <a href="retrieve.html">
                    <button type="button" class="btn btn-outline-light">忘记了密码🤔</button>
                </a>
            </div>
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: "#login-div",
            data: {
                u_uid: "",
                u_pwd: "",
                shenfen: "1"
            },
            methods: {
                login() {
                    //正则验证
                    if (this.u_uid == "") {
                        alert("用户名不能为空");
                        return;
                    }
                    if (this.u_pwd == "") {
                        alert("密码不能为空");
                        return;
                    }
                    //异步请求
                    axios.post("php/login.php", {
                        u_uid: this.u_uid,
                        u_pwd: this.u_pwd,
                        shenfen: this.shenfen
                    })
                        .then(res => {
                            if (res.data.code == 1) {
                                location = res.data.url;
                            }
                            if (res.data.code == -1) {
                                alert("密码错误!");
                            }
                            if (res.data.code == 0) {
                                alert("账号不存在!");
                            }
                            if (res.data.code == -2) {
                                alert("数据库查询错误!");
                            }
                            if (res.data.code == -3) {
                                alert("您的账号已于 "+ res.data.rtime +" 被注销!您可联系学校管理员恢复账号！");
                            }
                        }).catch(err => {
                            console.log(err);
                        })
                }
            }
        })
    </script>
</body>

</html>